<template>
    <div>
        <el-row :gutter="20" class="marginTop20" v-if="data.length > 0">
            <el-col :span="4" v-for="(item, index) in data" :key="index">
                <div class="videoBox hand radius10" @click="selectFun(item.creation,index)">
                    <el-image style="width: 100%;height: 280px;" :src="item.creation.first_frame" fit="cover"></el-image>
                    <div class="" style="padding: 10px;font-size: 14px;">
                        <div class="omit1">
                            {{ item.creation.creation_name }}
                        </div>
                        <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
                            <div class="mt-4 flex align-center">
                                <div class="flex align-center author-name">
                                    <el-image :src="item.creation.author.avatar" fit="cover"
                                        style="width: 20px;height: 20px;border-radius:100%;flex-shrink: 0"></el-image>
                                    <span class="color-999 pl-6 font-13">{{ item.creation.author.name }}</span>
                                </div>
                                <div class="color-999 pl-6 font-13">{{ item.creation.created_at | getTimeAgo }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div v-else>
        <el-empty :image="empty_image"></el-empty>
      </div>
        <short-pop :creation="creation" :index="choose_index" @next="next" @prev="prev" @setLike="setLike" ref="pop"></short-pop>
    </div>
</template>

<script>

import pageTool from "@/mixins/page";
import shortPop from '@/components/video/short.vue'
export default {
    components:{
        shortPop,
    },
    mixins: [pageTool],
    props: {
        user_id: {
            type: [Number, String]
        }
    },
    data() {
        return {
            query: {
                user_id: '',
                creation_type: 'short',
            },
            empty_image: require('@/assets/image/empty.png'),
            data: [],
            creation: null,
            choose_index: 0,
        }
    },
    mounted() {
        if (this.user_id) {
            this.query.user_id = this.user_id
            this.beforeInit()
        }
    },
    methods: {
        beforeInit() {
            this.url = "/creation/like/index";
            this.append = true;
            this.init(); //重新请求数据
        },

        selectFun(item,index) {
                this.showPop(item,index)
        },
        showPop(creation,index) {
            console.log('creation',creation)
            this.creation = creation
            this.$refs.pop.visible = true
            this.choose_index = index
            this.$nextTick(() => {
                this.$refs.pop.init()
            })
        },

        setLike(data) {
            if (data.type != undefined && data.index != undefined) {
                this.data[data.index].liked_count = data.type
                if (data.type) {
                    this.data[data.index].like_count++
                } else {
                    this.data[data.index].like_count--
                }
            }
        },

        next() {
            let next_creation = this.data[this.choose_index + 1]
            if (next_creation) {
                this.creation = next_creation.creation
                this.$nextTick(() => {
                    this.$refs.pop.switch()
                    this.choose_index++
                })
            }
        },
        prev() {
            let prev_creation = this.data[this.choose_index - 1]
            if (prev_creation) {
                this.creation = prev_creation.creation
                this.$nextTick(() => {
                    this.$refs.pop.switch()
                    this.choose_index--
                })
            }
        },

    }

}
</script>

<style lang="scss" scoped>
.videoBox {
    background-color: #151225;
    overflow: hidden;
}
</style>